<template>
    <!-- shop-jurisdiction 店铺权益,(查询,修改,id) -->
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>权益查询</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- form表单区域 -->
    <el-card v-for="item in jurisdict"
    :key="item.rights_id">
    <div v-if="item.rights_level==='1'">  一级权益</div>
    <div v-if="item.rights_level==='2'">  二级权益</div>
    <div v-if="item.rights_level==='3'">  三级权益</div>
      <el-form ref="jurisdict" :model="item"
      :inline="true">
        <el-form-item label="可上架商品数量" label-width="120px">
          <el-input v-model="item.goods_num"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="item.goods_price"></el-input>
        </el-form-item>
        <span>元/年</span>
        <el-form-item label="优惠价">
          <el-input v-model="item.discounts_price"></el-input>
        </el-form-item>
        <span>元/年</span>
        <el-form-item>
          <template>
            <el-button type="primary"
            @click="modify(item)">修改</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="center">
      <el-button type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jurisdict: []
      // item: {
      //   discounts_price: 220.00,
      //   goods_num: 20,
      //   goods_price: 200.00
      // }
    }
  },
  created () {
    this.getJurisdict()
  },
  mounted () {

  },
  methods: {
    // 获取权限
    async getJurisdict () {
      const { data: res } = await this.$http.get('shop-rights')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取权限失败')
      this.jurisdict = res.data
    },
    // 修改
    async modify (item) {
      // console.log(item.rights_id)
      // console.log(item)
      const { data: res } = await this.$http.put(`shop-rights/${item.rights_id}`, item)
      if (res.meta.status !== 200) return this.$message.error('修改权限失败')
      this.$message.success('修改权限成功')
      this.getJurisdict()
    }
  }
}
</script>

<style scoped lang="less">
.center{
  margin-top: 20px;
  >.el-button {
    margin-left: 15%;
    width: 150px;
  }
}
/deep/.el-form-item {
  margin: 0 40px;
  .el-form-item__content{
    width: 80px;
  }
  .el-button{
    width: 100px;
    margin-left:100px ;
    // height: 40px;
    line-height: 20px;
    span{
      line-height: 20px;
      text-align: center;
      margin: 0 auto;
    }
  }
}
/deep/.el-form{
  span{
    line-height: 40px;
    margin-left: -30px;
  }
}
</style>
